<template>
    <div class="app-container">
        <el-card shadow="never" style="margin-bottom:24px;">
            <el-row>
                <i class="el-icon-plus"></i>
                <span class="search-title">发布</span>
            </el-row>
            <el-row class="row-margin">
                <el-button type="primary" size="small" @click.native="handleGoToAddOrModify">
                    发布商品销售
                </el-button>
            </el-row>
        </el-card>
        <el-tabs v-model="activityTab" type="card" @tab-click="handleChangeTab">
            <el-tab-pane label="售卖中" name="saling">
                <el-card class="filter-container" shadow="never">
                    <el-row>
                        <i class="el-icon-search"></i>
                        <span class="search-title">筛选条件</span>
                    </el-row>
                    <el-row class="row-margin">
                        <el-form ref="filterFormRef1" inline :model="listQuery1">
                            <el-form-item prop="categoryId">
                                <el-cascader
                                    v-model="listQuery1.categoryId"
                                    :options="categoryList"
                                    :props="{ checkStrictly: false, emitPath: false }"
                                    placeholder="商品分类"
                                    clearable
                                ></el-cascader>
                            </el-form-item>
                            <el-form-item prop="supplierId">
                                <el-select v-model="listQuery1.supplierId" placeholder="全部供货商">
                                    <el-option
                                        v-for="item in supplierList"
                                        :key="item.id"
                                        :label="item.name"
                                        :value="item.id"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item prop="nameOrCode">
                                <el-row type="flex">
                                    <el-input
                                        placeholder="商品名称/商品编码"
                                        v-model="listQuery1.nameOrCode"
                                    >
                                    </el-input>
                                </el-row>
                            </el-form-item>
                            <el-form-item>
                                <el-button
                                    type="primary"
                                    @click="handleSearchList1"
                                    style="margin-left:10px"
                                    >查询</el-button
                                >
                                <el-button @click="handleResetSearch1" style="margin-left:10px"
                                    >重置</el-button
                                >
                            </el-form-item>
                        </el-form>
                    </el-row>
                </el-card>
                <div class="table-container">
                    <el-table
                        ref="salingTableRef"
                        :data="dataList1"
                        style="width: 100%"
                        v-loading="listLoading1"
                        border
                    >
                        <el-table-column label="活动编号" align="center">
                            <template slot-scope="scope">{{ scope.row.activityNo }}</template>
                        </el-table-column>
                        <el-table-column label="商品/价格" width="300" align="center">
                            <template slot-scope="scope">
                                <el-row type="flex" justify="center">
                                    <el-avatar
                                        shape="square"
                                        :size="50"
                                        :src="scope.row.resourceUrl"
                                    >
                                        <img
                                            src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                                        />
                                    </el-avatar>
                                    <div class="goods-info">
                                        <div class="goods-name" :title="scope.row.goodsName">
                                            {{ scope.row.goodsName }}
                                        </div>
                                        <div>
                                            <span class="goods-price"
                                                >￥ {{ formatMoney(scope.row.sellPrice) }}</span
                                            >
                                            <span class="goods-unit" :title="scope.row.unit">
                                                {{ scope.row.unit }}
                                            </span>
                                        </div>
                                    </div>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column label="活动时间" align="center" width="200">
                            <template slot-scope="scope"
                                >{{ scope.row.startTime }} <br />
                                - {{ scope.row.endTime }}</template
                            >
                        </el-table-column>
                        <el-table-column label="实销件数" align="center">
                            <template slot-scope="scope">{{ scope.row.sales }}</template>
                        </el-table-column>
                        <el-table-column label="仓库库存" align="center">
                            <template slot-scope="scope">{{ scope.row.totalStock }}</template>
                        </el-table-column>
                        <el-table-column label="供货价" align="center">
                            <template slot-scope="scope">{{ scope.row.suppllyPrice }}</template>
                        </el-table-column>
                        <el-table-column label="团长佣金" width="100" align="center">
                            <template slot-scope="scope">{{ scope.row.commission }}</template>
                        </el-table-column>
                        <el-table-column label="供货商" width="100" align="center">
                            <template slot-scope="scope">{{ scope.row.supplierName }}</template>
                        </el-table-column>
                        <el-table-column label="活动剩余件数" width="100" align="center">
                            <template slot-scope="scope">{{ scope.row.leftTotalStock }}</template>
                        </el-table-column>
                        <el-table-column label="操作" width="160" align="center">
                            <template slot-scope="scope">
                                <p>
                                    <el-button
                                        size="mini"
                                        type="primary"
                                        @click="
                                            handleShowActivity(
                                                scope.row.id,
                                                scope.row.goodsId,
                                                scope.row.goodsSkuId
                                            )
                                        "
                                        >查看
                                    </el-button>
                                    <pop-confirm
                                        @confirm="handleStopSaling(scope.row.id)"
                                        okText="停售"
                                        cancelText="取消"
                                        title="停售"
                                    >
                                        <el-button type="danger" size="mini">停售</el-button>
                                    </pop-confirm>
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination-container">
                    <el-pagination
                        background
                        @size-change="handleSizeChange1"
                        @current-change="handleCurrentChange1"
                        layout="total, sizes,prev, pager, next,jumper"
                        :page-size="listQuery1.pageSize"
                        :page-sizes="[5, 10, 15]"
                        :current-page.sync="listQuery1.pageNum"
                        :total="total1"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="已停售" name="stopped">
                <el-card class="filter-container" shadow="never">
                    <el-form ref="filterFormRef2" inline :model="listQuery2">
                        <el-form-item prop="categoryId">
                            <el-cascader
                                v-model="listQuery2.categoryId"
                                :options="categoryList"
                                :props="{ checkStrictly: false, emitPath: false }"
                                placeholder="商品分类"
                                clearable
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item prop="supplierId">
                            <el-select v-model="listQuery2.supplierId" placeholder="全部供货商">
                                <el-option
                                    v-for="item in supplierList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="nameOrCode">
                            <el-row type="flex">
                                <el-input
                                    placeholder="商品名称/商品编码"
                                    v-model="listQuery2.nameOrCode"
                                >
                                </el-input>
                            </el-row>
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                type="primary"
                                @click="handleSearchList2"
                                style="margin-left:10px"
                                >查询</el-button
                            >
                            <el-button @click="handleResetSearch2" style="margin-left:10px"
                                >重置</el-button
                            >
                        </el-form-item>
                    </el-form>
                </el-card>
                <div class="table-container">
                    <el-table
                        ref="stoppedTableRef"
                        :data="dataList2"
                        style="width: 100%"
                        v-loading="listLoading2"
                        border
                    >
                        <el-table-column label="活动编号" align="center">
                            <template slot-scope="scope">{{ scope.row.activityNo }}</template>
                        </el-table-column>
                        <el-table-column label="商品/价格" width="300" align="center">
                            <template slot-scope="scope">
                                <el-row type="flex" justify="center">
                                    <el-avatar
                                        shape="square"
                                        :size="50"
                                        :src="scope.row.resourceUrl"
                                    >
                                        <img
                                            src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                                        />
                                    </el-avatar>
                                    <div class="goods-info">
                                        <div class="goods-name" :title="scope.row.goodsName">
                                            {{ scope.row.goodsName }}
                                        </div>
                                        <div>
                                            <span class="goods-price"
                                                >￥ {{ formatMoney(scope.row.sellPrice) }}</span
                                            >
                                            <span class="goods-unit" :title="scope.row.unit">
                                                {{ scope.row.unit }}
                                            </span>
                                        </div>
                                    </div>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column label="活动时间" align="center" width="200">
                            <template slot-scope="scope"
                                >{{ scope.row.startTime }} <br />
                                - {{ scope.row.endTime }}</template
                            >
                        </el-table-column>
                        <el-table-column label="实销件数" align="center">
                            <template slot-scope="scope">{{ scope.row.sales }}</template>
                        </el-table-column>
                        <el-table-column label="销售总金额" align="center">
                            <template slot-scope="scope">{{ scope.row.socialName }}</template>
                        </el-table-column>
                        <el-table-column label="团长总佣金" align="center">
                            <template slot-scope="scope">{{ scope.row.socialName }}</template>
                        </el-table-column>
                        <el-table-column label="供货商结算余额" align="center">
                            <template slot-scope="scope">{{ scope.row.sale }}</template>
                        </el-table-column>
                        <el-table-column label="供货商" align="center">
                            <template slot-scope="scope">{{ scope.row.supplierName }}</template>
                        </el-table-column>
                        <el-table-column label="结算状态" align="center">
                            <template slot-scope="scope">
                                <el-tag v-if="scope.row.settleStatus === 'SETTLED'" type="success"
                                    >已结算</el-tag
                                >
                                <el-tag v-if="scope.row.settleStatus === 'UNSETTLE'" type="warning"
                                    >未结算</el-tag
                                >
                                <el-tag v-if="scope.row.settleStatus === 'NOTSETTLE'" type="danger"
                                    >不可结算</el-tag
                                >
                            </template>
                        </el-table-column>
                        <el-table-column label="操作" width="160" align="center">
                            <template slot-scope="scope">
                                <p>
                                    <el-button
                                        size="mini"
                                        type="primary"
                                        @click="
                                            handleShowActivity(
                                                scope.row.id,
                                                scope.row.goodsId,
                                                scope.row.goodsSkuId
                                            )
                                        "
                                        >查看
                                    </el-button>
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination-container">
                    <el-pagination
                        background
                        @size-change="handleSizeChange2"
                        @current-change="handleCurrentChange2"
                        layout="total, sizes,prev, pager, next,jumper"
                        :page-size="listQuery2.pageSize"
                        :page-sizes="[5, 10, 15]"
                        :current-page.sync="listQuery2.pageNum"
                        :total="total2"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
            <el-tab-pane label="定时上架" name="timing">
                <el-card class="filter-container" shadow="never">
                    <el-form ref="filterFormRef3" inline :model="listQuery3">
                        <el-form-item prop="categoryId">
                            <el-cascader
                                v-model="listQuery3.categoryId"
                                :options="categoryList"
                                :props="{ checkStrictly: false, emitPath: false }"
                                placeholder="商品分类"
                                clearable
                            ></el-cascader>
                        </el-form-item>
                        <el-form-item prop="supplierId">
                            <el-select v-model="listQuery3.supplierId" placeholder="全部供货商">
                                <el-option
                                    v-for="item in supplierList"
                                    :key="item.id"
                                    :label="item.name"
                                    :value="item.id"
                                ></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item prop="nameOrCode">
                            <el-row type="flex">
                                <el-input
                                    placeholder="商品名称/商品编码"
                                    v-model="listQuery3.nameOrCode"
                                >
                                </el-input>
                            </el-row>
                        </el-form-item>
                        <el-form-item>
                            <el-button
                                type="primary"
                                @click="handleSearchList3"
                                style="margin-left:10px"
                                >查询</el-button
                            >
                            <el-button @click="handleResetSearch3" style="margin-left:10px"
                                >重置</el-button
                            >
                        </el-form-item>
                    </el-form>
                </el-card>
                <div class="table-container">
                    <el-table
                        ref="timingTableRef"
                        :data="dataList3"
                        style="width: 100%"
                        v-loading="listLoading2"
                        border
                    >
                        <el-table-column label="活动编号" align="center">
                            <template slot-scope="scope">{{ scope.row.activityNo }}</template>
                        </el-table-column>
                        <el-table-column label="商品/价格" width="300" align="center">
                            <template slot-scope="scope">
                                <el-row type="flex" justify="center">
                                    <el-avatar
                                        shape="square"
                                        :size="50"
                                        :src="scope.row.resourceUrl"
                                    >
                                        <img
                                            src="https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png"
                                        />
                                    </el-avatar>
                                    <div class="goods-info">
                                        <div class="goods-name" :title="scope.row.goodsName">
                                            {{ scope.row.goodsName }}
                                        </div>
                                        <div>
                                            <span class="goods-price"
                                                >￥ {{ formatMoney(scope.row.sellPrice) }}</span
                                            >
                                            <span class="goods-unit" :title="scope.row.unit">
                                                {{ scope.row.unit }}
                                            </span>
                                        </div>
                                    </div>
                                </el-row>
                            </template>
                        </el-table-column>
                        <el-table-column label="供货价" align="center">
                            <template slot-scope="scope">{{ scope.row.suppllyPrice }}</template>
                        </el-table-column>
                        <el-table-column label="团长佣金" align="center">
                            <template slot-scope="scope">{{ scope.row.commission }}</template>
                        </el-table-column>
                        <el-table-column label="供货商" align="center">
                            <template slot-scope="scope">{{ scope.row.supplierName }}</template>
                        </el-table-column>
                        <el-table-column label="操作" width="160" align="center">
                            <template slot-scope="scope">
                                <p>
                                    <el-button
                                        size="mini"
                                        type="primary"
                                        @click="
                                            handleEditActivity(
                                                scope.row.id,
                                                scope.row.goodsId,
                                                scope.row.goodsSkuId
                                            )
                                        "
                                        >编辑
                                    </el-button>
                                </p>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="pagination-container">
                    <el-pagination
                        background
                        @size-change="handleSizeChange3"
                        @current-change="handleCurrentChange3"
                        layout="total, sizes,prev, pager, next,jumper"
                        :page-size="listQuery3.pageSize"
                        :page-sizes="[5, 10, 15]"
                        :current-page.sync="listQuery3.pageNum"
                        :total="total3"
                    >
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
        <edit-rule-form-modal
            v-if="editRuleFormModalVisible"
            :visible.sync="editRuleFormModalVisible"
            :goodsId="curGoodsId"
            :goodsSkuId="curGoodsSkuId"
            :activityId="curActivityId"
            :edit="curEdit"
            @hide="handleRuleFormModalHide"
        ></edit-rule-form-modal>
    </div>
</template>
<script>
import { getActivityList, stopActivity, getActivityDetail } from '@/api/activity';
import { getCateList, getSupplierList } from '@/api/goodsBase';
import PopConfirm from '@/components/PopConfirm/popConfirm';
import EditRuleFormModal from './component/editRuleFormModal';
import { parseTimeToCh } from '@/utils/index';
import { formatMoney } from '@/utils/goods';

const defaultListQuery = {
    categoryId: null,
    supplierId: null,
    nameOrCode: '',
    pageNum: 1,
    pageSize: 5
};
export default {
    components: {
        PopConfirm,
        EditRuleFormModal
    },
    data() {
        return {
            supplierList: [],
            categoryList: [],
            activityTab: 'saling',
            dataList1: [],
            dataList2: [],
            dataList3: [],
            listLoading1: false,
            listLoading2: false,
            listLoading3: false,
            listQuery1: Object.assign({ status: 'START' }, defaultListQuery),
            listQuery2: Object.assign({ status: 'FINISHED' }, defaultListQuery),
            listQuery3: Object.assign({ status: 'UNSTART' }, defaultListQuery),
            total1: 0,
            total2: 0,
            total3: 0,
            editRuleFormModalVisible: false,
            curActivityId: undefined,
            curGoodsId: null,
            curGoodsSkuId: null,
            curEdit: false
        };
    },
    created() {
        this.fetchCategoryList();
        this.fetchSupplierList();
        this.getSalingList();
    },
    watch: {},
    filters: {},
    computed: {},
    methods: {
        handleChangeTab(data) {
            if (data.name === 'saling') {
                this.getSalingList();
            } else if (data.name === 'stopped') {
                this.getStoppedList();
            } else if (data.name === 'timing') {
                this.getTimingList();
            }
        },
        handleGoToAddOrModify(e, id) {
            this.$router.push('addActivity');
        },
        fetchCategoryList() {
            getCateList().then(res => {
                if (res.data && res.data.success == true) {
                    let list = res.data.data;
                    this.categoryList = list.map(el => {
                        return {
                            value: el.category.id,
                            label: el.category.name,
                            children: el.detailList.map(el => {
                                return { value: el.categoryId, label: el.name };
                            })
                        };
                    });
                } else {
                    this.categoryList = [];
                }
            });
        },
        fetchSupplierList() {
            getSupplierList().then(res => {
                let resdata = res.data;
                if (resdata && resdata.success) {
                    this.supplierList = resdata.data;
                } else {
                    this.supplierList = [];
                }
            });
        },
        getSalingList() {
            this.listLoading1 = true;
            getActivityList(this.listQuery1).then(res => {
                this.listLoading1 = false;
                if (res.data.success) {
                    this.dataList1 = res.data.data;
                    this.total1 = res.data.extra.total;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        getStoppedList() {
            this.listLoading2 = true;
            getActivityList(this.listQuery2).then(res => {
                this.listLoading2 = false;
                if (res.data.success) {
                    this.dataList2 = res.data.data;
                    this.total2 = res.data.extra.total;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        getTimingList() {
            this.listLoading3 = true;
            getActivityList(this.listQuery3).then(res => {
                this.listLoading3 = false;
                if (res.data.success) {
                    this.dataList3 = res.data.data;
                    this.total3 = res.data.extra.total;
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        handleSearchList1() {
            this.listQuery1.pageNum = 1;
            this.getSalingList();
        },
        handleResetSearch1() {
            this.$refs.filterFormRef1.resetFields();
        },
        handleSearchList2() {
            this.listQuery2.pageNum = 1;
            this.getStoppedList();
        },
        handleResetSearch2() {
            this.$refs.filterFormRef2.resetFields();
        },
        handleSearchList3() {
            this.listQuery3.pageNum = 1;
            this.getTimingList();
        },
        handleResetSearch3() {
            this.$refs.filterFormRef3.resetFields();
        },
        handleSizeChange1(val) {
            this.listQuery1.pageNum = 1;
            this.listQuery1.pageSize = val;
            this.getSalingList();
        },
        handleCurrentChange1(val) {
            this.listQuery1.pageNum = val;
            this.getSalingList();
        },
        handleSizeChange2(val) {
            this.listQuery2.pageNum = 1;
            this.listQuery2.pageSize = val;
            this.getStoppedList();
        },
        handleCurrentChange2(val) {
            this.listQuery2.pageNum = val;
            this.getStoppedList();
        },
        handleSizeChange3(val) {
            this.listQuery3.pageNum = 1;
            this.listQuery3.pageSize = val;
            this.getTimingList();
        },
        handleCurrentChange3(val) {
            this.listQuery3.pageNum = val;
            this.getTimingList();
        },
        handleShowActivity(activityId, goodsId, goodsSkuId) {
            this.curGoodsId = goodsId;
            this.curGoodsSkuId = goodsSkuId;
            this.curActivityId = activityId;
            this.curEdit = false;
            this.editRuleFormModalVisible = true;
        },
        handleEditActivity(activityId, goodsId, goodsSkuId) {
            this.curGoodsId = goodsId;
            this.curGoodsSkuId = goodsSkuId;
            this.curActivityId = activityId;
            this.curEdit = true;
            this.editRuleFormModalVisible = true;
        },
        handleRuleFormModalHide() {
            this.editRuleFormModalVisible = false;
        },
        handleStopSaling(activityId) {
            stopActivity(activityId).then(res => {
                if (res.data.success) {
                    this.$message({
                        message: '停售成功!',
                        type: 'info',
                        duration: 1000
                    });
                    this.getSalingList();
                } else {
                    this.$message({
                        message: res.data.msg,
                        type: 'error',
                        duration: 3000
                    });
                }
            });
        },
        parseTimeToCh(val) {
            return parseTimeToCh(val);
        },
        formatMoney(num) {
            return formatMoney(num);
        }
    }
};
</script>
<style scoped lang="scss">
.goods-info {
    width: 150px;
}
.goods-name {
    width: 150px;
    height: 30px;
    text-align: start;
    padding-left: 10px;
    overflow: hidden;
    line-height: 15px;
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
}
.goods-price {
    color: red;
    float: left;
    margin-left: 10px;
}
.goods-unit {
    float: right;
    text-align: left;
    width: 30px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}
</style>
